<template>
  <view class="user-container">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="user-info">
        <image src="/static/images/1.png" mode="aspectFill" class="avatar"></image>
        <view class="user-details">
          <text class="username">未登录</text>
          <text class="user-id">点击登录/注册</text>
        </view>
      </view>
      <uni-icons type="setting" size="20" color="#fff" class="setting-icon"></uni-icons>
    </view>
    
    <!-- 订单状态 -->
    <view class="order-status">
      <view class="order-title">
        <text>我的订单</text>
        <view class="view-all" @tap="viewAllOrders">
          <text>全部订单</text>
          <uni-icons type="arrow-right" size="12" color="#999"></uni-icons>
        </view>
      </view>
      
      <view class="order-types">
        <view class="order-type" v-for="(item, index) in orderTypes" :key="index" @tap="viewOrderType(index)">
          <uni-icons :type="item.icon" size="20" color="#666"></uni-icons>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item" v-for="(item, index) in functionItems" :key="index" @tap="openFunction(index)">
        <view class="function-icon">
          <uni-icons :type="item.icon" size="18" :color="item.color"></uni-icons>
        </view>
        <text class="function-name">{{ item.name }}</text>
        <uni-icons type="arrow-right" size="12" color="#999" class="arrow-icon"></uni-icons>
      </view>
    </view>
    
    <!-- 服务与支持 -->
    <view class="service-list">
      <view class="service-item" v-for="(item, index) in serviceItems" :key="index" @tap="openService(index)">
        <view class="service-icon">
          <uni-icons :type="item.icon" size="18" :color="item.color"></uni-icons>
        </view>
        <text class="service-name">{{ item.name }}</text>
        <uni-icons type="arrow-right" size="12" color="#999" class="arrow-icon"></uni-icons>
      </view>
    </view>
    
    <!-- 退出登录按钮 -->
    <view class="logout-btn" @tap="logout">
      退出登录
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        orderTypes: [
          { name: '待付款', icon: 'circle' },
          { name: '待发货', icon: 'circle' },
          { name: '待收货', icon: 'circle' },
          { name: '待评价', icon: 'circle' },
          { name: '售后', icon: 'circle' }
        ],
        functionItems: [
          { name: '我的地址', icon: 'map-pin', color: '#ff6b81' },
          { name: '我的优惠券', icon: 'gift', color: '#ffa502' },
          { name: '我的积分', icon: 'medal', color: '#ff9ff3' },
          { name: '我的收藏', icon: 'star', color: '#54a0ff' }
        ],
        serviceItems: [
          { name: '联系客服', icon: 'chat', color: '#1dd1a1' },
          { name: '意见反馈', icon: 'info', color: '#5f27cd' },
          { name: '帮助中心', icon: 'help', color: '#5f27cd' }
        ]
      }
    },
    methods: {
      // 查看全部订单
      viewAllOrders() {
        this.showToast('查看全部订单');
      },
      
      // 查看指定类型订单
      viewOrderType(index) {
        this.showToast('查看' + this.orderTypes[index].name + '订单');
      },
      
      // 打开功能
      openFunction(index) {
        this.showToast('打开' + this.functionItems[index].name);
      },
      
      // 打开服务
      openService(index) {
        this.showToast('打开' + this.serviceItems[index].name);
      },
      
      // 退出登录
      logout() {
        uni.showModal({
          title: '确认退出',
          content: '确定要退出登录吗？',
          success: (res) => {
            if (res.confirm) {
              this.showToast('退出登录成功');
            }
          }
        });
      },
      
      // 显示提示
      showToast(message) {
        uni.showToast({
          title: message,
          icon: 'none',
          duration: 2000
        });
      }
    }
  }
</script>

<style scoped>
  .user-container {
    min-height: 100vh;
    background-color: #f8f8f8;
  }
  
  .user-header {
    background: linear-gradient(to right, #3d9a0b, #66bb00);
    padding: 30px 20px 20px;
    color: #fff;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin-right: 15px;
  }
  
  .user-details {
    flex: 1;
  }
  
  .username {
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
  }
  
  .user-id {
    font-size: 14px;
    opacity: 0.8;
  }
  
  .setting-icon {
    margin-left: 10px;
  }
  
  .order-status {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px 20px;
  }
  
  .order-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .view-all {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 14px;
  }
  
  .view-all text {
    margin-right: 5px;
  }
  
  .order-types {
    display: flex;
    justify-content: space-between;
  }
  
  .order-type {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .order-type uni-icons {
    margin-bottom: 5px;
  }
  
  .order-type text {
    font-size: 12px;
    color: #666;
  }
  
  .function-list,
  .service-list {
    background-color: #fff;
    margin-bottom: 10px;
  }
  
  .function-item,
  .service-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f2f2f2;
  }
  
  .function-icon,
  .service-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }
  
  .function-name,
  .service-name {
    flex: 1;
    font-size: 15px;
  }
  
  .arrow-icon {
    margin-left: 10px;
  }
  
  .logout-btn {
    margin: 20px;
    padding: 12px;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
    color: #666;
    font-size: 15px;
  }
</style>